import React, { FC } from "react";
import { Outlet } from "react-router-dom";
import styles from "./MainLayout.module.scss";
import { Layout, Spin } from "antd";
import Logo from "../components/Logo";
import UserInfo from "../components/UserInfo";
import useLoadingUseInfo from "../hooks/useLoadingUserInfo";
import useNavPage from "../hooks/useNviPage";

const { Header, Content, Footer } = Layout;
const MainLayout: FC = () => {
  const { waitingLoadUser } = useLoadingUseInfo();  
  useNavPage(waitingLoadUser)
  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.left}>
          <Logo />
        </div>
        <div className={styles.right}>
          <UserInfo />
        </div>
      </Header>
      <Content className={styles.main}>
        {waitingLoadUser ? <div style={{textAlign:'center',marginTop:'40vh'}}><Spin /></div> : <Outlet />}
      </Content>
      <Footer className={styles.footer}>
        星问卷-- @2024 -- footer -- by MrZ
      </Footer>
    </Layout>
  );
};
export default MainLayout;
